<template>
    <div class="qingwu">
        <div class="admin_table_page_title">
            <a-button @click="$router.back()" class="float_right" icon="arrow-left">返回</a-button>
            商品编辑
        </div>
        <div class="unline underm"></div>
        <div class="admin_form">
            <a-form-model :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">


                <a-form-model-item label="积分类型">
                    <a-radio-group>

                        <a-radio  v-model="info.type_1" @change="typeChange">
                            分类
                        </a-radio>

                        <a-radio  v-model="info.type_2"  @change="typeChange">
                            店铺
                        </a-radio>

                    </a-radio-group>

                </a-form-model-item>


                <a-form-model-item v-show="cateIsShow" label="选择商家分类" :rules="{ required: true}">
                    <a-select show-search @search="cateClassHandleSearch" v-model="info.cid" :filter-option="false">
                        <a-select-option v-for="(v,k) in cateList" :key="k" :value="v.id">{{ v.cate_name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>


                <a-form-model-item v-show="storeIsShow" label="选择店铺" :rules="{ required: true}">
                    <a-select show-search @search="storesClassHandleSearch" v-model="info.sid" :filter-option="false">
                        <a-select-option v-for="(v,k) in storesList" :key="k" :value="v.id">{{ v.store_name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>


                <a-form-model-item label="是否开启">
                    <a-switch v-model="info.state"/>
                </a-form-model-item>

                <a-form-model-item label="应用场景">
<!--                    <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
                        全选
                    </a-checkbox>-->
                    <a-checkbox-group v-model="info.scenes_type" :options="plainOptions"/>
                </a-form-model-item>

                <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
                    <a-button type="primary" @click="handleSubmit">提交</a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
    </div>
</template>

<script>

const plainOptions = [
    { label: '用户下单', value: '1' },
    { label: '用户收货', value: '2' },
];


const defaultCheckedList = [
    { label: '用户下单', value: '1' },
    { label: '用户收货', value: '2' },
];

export default {
    components: {},
    props: {},
    data() {
        return {
            info: {
                type:1,
                scenes_type:defaultCheckedList
            },
            list: [],
            platform: false, // 平台PC false 手机 TRUE
            goods_content: '', // 商品详情
            id: 0,
            plainOptions,
            indeterminate: true,
            checkAll: false,
            cateList: [],
            storesList: [],
            cateIsShow: true,
            storeIsShow: false
        };
    },
    watch: {},
    computed: {},
    methods: {
        handleSubmit() {
            let api = this.$apiHandle(this.$api.IntegralSet, this.id);

            if (this.cateIsShow == true) {
                this.info.belong_id = this.info.cid;
            }

            if (this.storeIsShow == true) {
                this.info.belong_id = this.info.sid;
            }

            this.info.state       = this.info.state?1:0;

            if (api.status) {
                this.$put(api.url, this.info).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        return this.$router.back();
                    } else {
                        return this.$message.error(res.msg)
                    }
                })
            } else {

                this.$post(api.url, this.info).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        return this.$router.go(-1);
                    } else {
                        return this.$message.error(res.msg)
                    }

                })
            }
        },

        // 编辑获取信息
        get_info() {
            this.$get(this.$api.IntegralSet + '/' + this.id).then(res => {
                this.info = res.data;
                if (this.info.type == 1) {
                    this.cateIsShow = true;
                    this.storeIsShow = false;
                    this.info.cid = this.info.belong_id;

                }else if (this.info.type == 2) {
                    this.cateIsShow = false;
                    this.storeIsShow = true;
                    this.info.sid = this.info.belong_id;

                }
                this.$forceUpdate();
            })
        },

        onload() {
            // 判断你是否是编辑
            if (!this.$isEmpty(this.$route.params.id)) {
                this.id = this.$route.params.id;
                this.get_info();
            }
            this.cateClassHandleSearch('');
            this.storesClassHandleSearch('');
        },


        onChange(checkedList) {
            this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
            this.checkAll = checkedList.length === plainOptions.length;
        },


        onCheckAllChange(e) {
            Object.assign(this, {
                checkedList: e.target.checked ? plainOptions : {},
                indeterminate: false,
                checkAll: e.target.checked,
            });
        },


        // 分类搜索
        cateClassHandleSearch(e) {
            this.$get(this.$api.adminStoresCate, {cate_name: e}).then(res => {
                this.cateList = res.data.data;
            })
        },

        // 商铺搜索
        storesClassHandleSearch(e) {
            this.$get(this.$api.estateStores, {store_name: e}).then(res => {
                this.storesList = res.data.data;
            })
        },

        typeChange() {
            if (this.cateIsShow == true) {
                this.storeIsShow = true;
                this.cateIsShow = false;
            } else if (this.storeIsShow == true) {
                this.storeIsShow = false;
                this.cateIsShow = true;
            }
        }

    },
    created() {
        this.onload();
    },
    mounted() {
    }
};
</script>
<style lang="scss" scoped>
.admin_editor_span {
    margin-right: 10px;
    border: 1px solid #efefef;
    line-height: 30px;
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 10px;
    cursor: pointer;

    &:hover {
        border-color: #ccc;
    }

    &.check {
        border-color: #ccc;
    }
}

.goods_upload_btn {
    margin-top: 10px;
}

.goods_specs {
    border: 1px solid #efefef;
    margin-top: 10px;
}

.row_td {
    padding: 8px;
}

.goods_image {
    .item {
        &.noimg {
            width: 160px;
            height: 160px;
            background: #efefef;
            text-align: center;
            border-radius: 4px;

            i {
                font-size: 40px;
                line-height: 160px;
                color: #999;
            }
        }

        .item_img {
            width: 160px;
            height: 160px;
            display: block;
            float: left;
            box-sizing: border-box;
            margin-right: 10px;
            margin-bottom: 10px;
            position: relative;
            border: 1px solid #efefef;

            .item_bg {
                border-radius: 4px;
                text-align: center;
                line-height: 160px;
                display: none;
                width: 100%;
                height: 100%;
                position: absolute;
                color: #fff;
                top: 0;
                left: 0;
                background: rgba(0, 0, 0, 0.5); /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
                i {
                    padding: 0 14px;
                    font-size: 16px;
                    cursor: pointer;
                }
            }

            @media \0screen\,screen \9
            { /* 只支持IE6、7、8 */
                .item_bg {
                    background-color: #000;
                    filter: Alpha(opacity=50);
                    position: static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
                    *zoom: 1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
                }
                .item_bg span {
                    position: relative; /* 设置子元素为相对定位，可让子元素不继承Alpha值 */
                }
            }

            img {
                width: 100%;
                height: 100%;
                border-radius: 4px;
            }

            .item_master {
                position: absolute;
                left: 0;
                bottom: 0;
                border-radius: 0 0 4px 4px;
                background: #000;
                line-height: 26px;
                height: 26px;
                width: 100%;
                z-index: 3;
                background: rgba(0, 0, 0, 0.5);
                color: #fff;
                text-align: center;
                font-size: 12px;
            }

            &:hover .item_bg {
                display: block;
            }
        }
    }
}

.row_th {
    background: #efefef;
}

.col_th {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
    display: block;
}
</style>
